<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-06-29 14:31:39
 * @LastEditTime: 2023-07-06 17:24:52
 * @FilePath: \myblog\src\views\ColumnView.vue
-->
<template>
  <div class="blog-column--word">
    <WordCloud :data="columnWords"
      nameKey="name"
      valueKey="value"
      :fontSize="[80,100]"
      :color="myColors"
      :showTooltip="false"
      :wordClick="wordClickHandler">
    </WordCloud>
  </div>
</template>

<script>
import WordCloud from 'vue-wordcloud'
export default {
  components:{
    WordCloud
  },
  data(){
    return {
      myColors: ['#1f77b4', '#629fc9', '#94bedb', '#c9e0ef'],
      columns: [],
    }
  },
created(){
  this.getColumns();
},
mounted(){
  this.$EventBus.$on('updateView', ()=> {
    this.updateView();
  })
},
watch:{},
computed:{
  columnWords() {
    return this.columns.map((item) => {
      return {
        name: item.name,
        value: item.aids.length * 5
      }
    })
  }
},
methods:{
  updateView(){
    this.getColumns();
  },
  wordClickHandler(name) {
    let columnIdx = this.columns.find((item) => {
      return item.name === name
    }).id
    this.$router.push({name:'index', query: {columnIdx}})
    },
  async getColumns () {
    try {
     let columns = await this.$api({type:"columns"})
     this.columns = columns.list;
    }
    catch(err)
    {
      console.log(err);
    }

  }
},
}
</script>
<style  scoped>
  .blog-column--word *{
    user-select: none;
  }
</style>